<template>
  <ul>
    <li v-for="day in days" :key="day">{{ day }}</li>
  </ul>
  <div class="Tbody">
    <div v-for="item in prevDaysArr" :key="'A' + item" class="prev">
      {{ item }}
    </div>
    <template v-for="day in currentDaysArr" :key="'B' + day">
      <div
        class="toMonth"
        :class="{ Today: day === dateValue.day }"
        @click="update(day)">
        {{ day }}
      </div>
    </template>

    <div v-for="item in nextDaysArr" :key="'C' + item" class="next">
      {{ item }}
    </div>
  </div>
  <!-- <button @click="dayin">打印</button> -->
</template>

<script setup>
import { ref, computed, inject } from 'vue'
const days = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
const dateValue = inject('dateValue')

/* 创建一个方法获取指定年月份的天数 */
function getDateInMonth(year, month) {
  return new Date(year, month, 0).getDate()
}
/* 创建一个方法获取当前月份的一号是周几 */
function getDayInMonth(year, month) {
  return new Date(year, month - 1, 1).getDay()
}
/* 获取当前月份的天数 */
const currentDays = computed(() => {
  return getDateInMonth(dateValue.value.year, dateValue.value.month)
})

/* 格子中显示的指定月份的天数 */
const currentDaysArr = computed(() => {
  return Array.from({ length: currentDays.value }, (_, i) => i + 1)
})

/* 计算当前月的一号是周几 */
const toMonthDay = computed(() => {
  /* 这里的month-1是因为JavaScript中的Date构造函数中,月份是从0开始计算的,所以month-1就代表着当前的月份,是为了让月份和JavaScript的Date构造函数的参数对应,确保日期正确 */
  return getDayInMonth(dateValue.value.year, dateValue.value.month)
})
/* 获取上一个月的天数 */
const prevDay = computed(() => {
  let year = dateValue.value.year
  let month = dateValue.value.month - 1
  if (month === 0) {
    year -= 1
    month = 12
  }
  return getDateInMonth(year, month)
})

/* 上月剩余天数 */
const prevDaysArr = computed(() => {
  const arr = []
  for (let i = prevDay.value - toMonthDay.value + 1; i <= prevDay.value; i++) {
    arr.push(i)
  }
  return arr
})
// console.log('上月剩余天数' + prevDaysArr.value)

/* 被占的格子数 */
const totalDays = computed(() => {
  return toMonthDay.value + currentDays.value
})
// console.log('被占的格子数' + totalDays.value)

/* 留给下一个月的格数 */
const needNext = computed(() => {
  const res = 42 - totalDays.value
  return res
})
// console.log('下一个月的格子数' + needNext.value)

/* 下一个月的显示天数 */
const nextDaysArr = computed(() => {
  const arr = []
  for (let i = 1; i <= needNext.value; i++) {
    arr.push(i)
  }
  return arr
})
// console.log('下一个月的显示天数' + nextDaysArr.value)

// console.log(prevDaysArr)

const emit = defineEmits(['update'])
const update = (day) => {
  dateValue.value.day = day
  emit('update', day)
}
/* const dayin = () => {
  console.log(
    '上月剩余天数' + prevDaysArr.value,
    '被占的格子数' + totalDays.value,
    '下一个月的显示天数' + nextDaysArr.value
  )
} */
</script>

<style scoped>
.Tbody {
  display: grid;
  grid-template-columns: repeat(7, 50px);
  grid-template-rows: repeat(6, 50px);
  width: 350px;
  height: 300px;
}
.Tbody div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  margin: 5px;
  background: #ccc;
  border-radius: 10px;
}
ul {
  display: flex;
  width: 350px;
  height: 50px;
  justify-content: space-around;
  align-items: center;
  list-style: none;
  border-bottom: 1px solid #ccc;
}
ul li {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  margin: 5px;
  background-color: green;
  text-align: center;
  line-height: 40px;
}
.Tbody .prev,
.Tbody .next {
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-style: italic;
}
.Tbody .toMonth {
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  background: black;
}
.Tbody .Today {
  background-color: blue;
}
</style>
